import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  Grid, Container, Header, Table, Icon,
} from 'semantic-ui-react'
import { global as globalDuck } from 'ducks'
import { PrimaryButton } from 'components/Button'
import Register from 'graphql/user/signup.graphql'
import SelectCard from 'components/selectCard'
import { Mutation } from 'react-apollo'

const ActiveCell = () => (
  <Table.Cell>
    <Icon color="green" name="checkmark" size="large" />
  </Table.Cell>
)

const NegtiveCell = () => (
  <Table.Cell>
    <Icon color="red" name="cancel" size="large" />
  </Table.Cell>
)

class SelectPlan extends Component {
  state = { plan: '' }

  setPlan = plan => this.setState({ plan })

  render() {
    const { plan } = this.state
    const { authInfo, actionReciveUser } = this.props
    return (
      <Container>
        <Grid padded centered verticalAlign="middle">
          <Grid.Row
            columns={1}
            style={{
              marginTop: '4em',
              marginBottom: '4em',
            }}
          >
            <Grid.Column>
              <Header as="h2" icon textAlign="center">
                <Header.Content>选择一个适合你的版本</Header.Content>
              </Header>
            </Grid.Column>
          </Grid.Row>
          <Grid.Row columns={3}>
            <Grid.Column>
              <SelectCard
                active={plan === 'label'}
                image="https://us.123rf.com/450wm/tpimovit/tpimovit1711/tpimovit171100350/90266895-vector-paper-airplane-travel-route-symbol-vector-illustration-of-hand-drawn-paper-plane-isolated-out.jpg?ver=6"
                header="标注版"
                meta="免费"
                description="仅用于标注人员"
                onClick={() => this.setPlan('label')}
              />
            </Grid.Column>
            <Grid.Column>
              <SelectCard
                active={plan === 'dev'}
                image="https://d1yn1kh78jj1rr.cloudfront.net/image/preview/rnp9KOKvfjdviiioz/storyblocks-jet-fighter-plane-icon-outline-illustration-of-fighter-plane-vector-icon-for-web_SciZJdQkm_SB_PM.jpg"
                header="开发版"
                meta="免费"
                description="提供一定的免费资源,并开放全部基础功能"
                onClick={() => this.setPlan('dev')}
              />
            </Grid.Column>
            <Grid.Column>
              <SelectCard
                active={plan === 'pro'}
                image="http://aosiru.info/wp-content/uploads/2018/05/pagina-para-colorear-de-transbordador-espacial-nave-para-naves-para-coloring-pages-for-adults-easy.jpg"
                header="旗舰版"
                meta="收费"
                description="可是使用所有服务,并提供专业支持"
                onClick={() => this.setPlan('pro')}
              />
            </Grid.Column>
          </Grid.Row>
          <Grid.Row
            columns={1}
            style={{
              marginTop: '4em',
            }}
          >
            <Grid.Column textAlign="center">
              <Mutation
                mutation={Register}
                onCompleted={data => actionReciveUser(data.insert_user.returning[0])}
              >
                {(addTodo, { loading }) => (
                  <PrimaryButton
                    disabled={plan === '' || loading}
                    content="确定"
                    primary
                    loading={loading}
                    onClick={() => addTodo({
                      variables: {
                        name: authInfo.name,
                        avatar: authInfo.picture,
                        plan,
                      },
                    })
                    }
                  />
                )}
              </Mutation>
            </Grid.Column>
          </Grid.Row>
          <Grid.Row
            columns={1}
            style={{
              marginTop: '4em',
            }}
          >
            <Grid.Column textAlign="center">
              <Table basic="very">
                <Table.Header>
                  <Table.Row>
                    <Table.HeaderCell />
                    <Table.HeaderCell>标注版</Table.HeaderCell>
                    <Table.HeaderCell>开发版</Table.HeaderCell>
                    <Table.HeaderCell>旗舰版</Table.HeaderCell>
                  </Table.Row>
                </Table.Header>

                <Table.Body>
                  <Table.Row>
                    <Table.Cell>创建项目</Table.Cell>
                    <NegtiveCell />
                    <ActiveCell />
                    <ActiveCell />
                  </Table.Row>
                  <Table.Row>
                    <Table.Cell>添加成员</Table.Cell>
                    <NegtiveCell />
                    <ActiveCell />
                    <ActiveCell />
                  </Table.Row>
                  <Table.Row>
                    <Table.Cell>创建数据集</Table.Cell>
                    <NegtiveCell />
                    <ActiveCell />
                    <ActiveCell />
                  </Table.Row>
                  <Table.Row>
                    <Table.Cell>私有数据服务器</Table.Cell>
                    <NegtiveCell />
                    <ActiveCell />
                    <ActiveCell />
                  </Table.Row>
                  <Table.Row>
                    <Table.Cell>技术支持</Table.Cell>
                    <NegtiveCell />
                    <Table.Cell>普通技术支持</Table.Cell>
                    <Table.Cell>高级技术支持</Table.Cell>
                  </Table.Row>
                  <Table.Row>
                    <Table.Cell>为其他组织标注</Table.Cell>
                    <ActiveCell />
                    <NegtiveCell />
                    <NegtiveCell />
                  </Table.Row>
                </Table.Body>
              </Table>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>
    )
  }
}

const mapStateToProps = state => ({
  authInfo: globalDuck.selectors.authInfo(state),
})


const mapDispatchToProps = {
  actionReciveUser: globalDuck.creators.actionReciveUser,
}

export default connect(mapStateToProps, mapDispatchToProps)(SelectPlan)
